<template>
    <div class="goreap">
    <!-- <el-dialog title="" width="90%" height="80%"> -->
        <div>
            <el-descriptions title="采收计划详情" direction="vertical" :rules="rules" :column="4" style="height: 200px;" border>
                <el-descriptions-item label="序号" width="150">{{ data.place }}</el-descriptions-item>
                <el-descriptions-item label="地块名称" width="150">{{ data.place }}</el-descriptions-item>
                <el-descriptions-item label="地块作物" width="150">{{ data.food }}</el-descriptions-item>
                <el-descriptions-item label="采收人" width="150">{{ data.secondRequest }}</el-descriptions-item>
                <el-descriptions-item label="一级果（公斤）" width="150">{{ data.third }}</el-descriptions-item>
                <el-descriptions-item label="二级果（公斤）" width="150">{{ data.thirdtRequest }}</el-descriptions-item>
                <el-descriptions-item label="三级果（公斤）" width="150">{{ data.common }}</el-descriptions-item>
                <el-descriptions-item label="通货" width="150"></el-descriptions-item>
            </el-descriptions>
        </div>
        <h3>本次采收量</h3>
        <el-form :model="tableData" label-width="120px" ref="ruleFormRef" style="margin-left:250px ;">
            <el-form-item label="选择地块" style="width: 350px;">
                <el-select v-model="tableData.place" placeholder="地块1 " label-width="100px" clearable>
                    <el-option label="地块1" value="1" />
                    <el-option label="地块2" value="2" />
                </el-select>
            </el-form-item>
            <el-form-item label="采收人" style="width: 350px;">
                <el-select v-model="tableData.people" placeholder="王浩" clearable>
                    <el-option label="王浩" value="王浩" />
                    <el-option label="张山" value="张山" />
                </el-select>
            </el-form-item>
            <el-form-item label="采收时间" style="width: 350px;">
                <el-date-picker v-model="tableData.times" type="date" placeholder="请选择" clearable />
            </el-form-item>
            <el-form-item label="一级果（公斤）">
                <el-input v-model="tableData.first" style="width: 350px;" />
            </el-form-item>
            <el-form-item label="二级果（公斤）">
                <el-input v-model="tableData.second" style="width: 350px;"/>
            </el-form-item>
            <el-form-item label="三级果（公斤）">
                <el-input v-model="tableData.third"style="width: 350px;" />
            </el-form-item>
            <el-form-item label="通货（公斤）">
                <el-input v-model="tableData.common" style="width: 350px;"/>
            </el-form-item>
                <el-form-item>
                    <el-button @click="close2Handler" > 取消 </el-button>
                    <el-button type="primary" @click="submitHandler">确认</el-button>
                </el-form-item>
        </el-form>
    <!-- </el-dialog> -->
     </div>
</template>

<script lang='ts' setup>
import type { PlanItems } from '@/interface/harvestInterface';
import router from '@/router';
import type { FormInstance, FormRules } from 'element-plus';
import { reactive, ref, watch, type ModelRef } from 'vue';
const props = defineProps(["data"])
const ruleFormRef = ref<FormInstance>()
const select = ref()
const tableData = ref({
    times:"",
    people: "",
    place: '',
    first: '',
    second: "",
    third: "",
    common: ""
})
const rules = reactive<FormRules<PlanItems>>({
    place: [
        { required: true, message: '请输入地块', trigger: 'blur' }
    ],
    people: [
        { required: true, message: '请输入采收人', trigger: 'blur' }
    ],
    times: [
        { required: true, message: '请选择采收时间', trigger: 'blur' }
    ],

})
const submitHandler = () => {
     if (!ruleFormRef.value) return;
    ruleFormRef.value.validate((valid, fields) => {
        if (valid) {
            router.push({ name: 'harvest' })
            // if (tableData) {
            //     if (typeof (tableData.times) !== 'string') {
            //         tableData.times = (props.data.times as Date).toLocaleDateString().replace(/\//g, '.')
            //     }
            // }
            // emits('load', tableData2)
        }else{
            console.log('error submit',fields)
        }
    })
    // router.push({name:'harvest'})
}
const close2Handler=()=>{
   router.push({name:'harvest'})
}
</script>

<style lang='scss' scoped>
.example-showcase .el-dropdown-link {
    cursor: pointer;
    color: var(--el-color-primary);
    display: flex;
    align-items: center;
}
.goreap{
    width: 100%;
    height: 150%;
    background: white;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 2;
}
</style>